<!-- <template> 使用render就要去掉template
  <div class='xtx-bread'>
    <slot/>
  </div>
</template> -->

<script>
// 导入h函数
import { h } from 'vue'
export default {
  name: 'XtxBread',
  render () { // render(createElement){retuen createElement()}
  // 1.template标签不需要了，单文件组件
  // 返回值就是组件内容
  // vue2的h函数是传参进来的，vue3.0的h函数需要导入进来
  // h参1 标签名 参2 标签的属性对象 参3标签的子节点
  // 需求 创建父容器  2.获取插槽内容 3.通过render函数控制每个内容后面i标签
  // 遍历插槽内有几个xtx-bread-item，给除最后一个元素外所有节点后面加i标签
    const items = this.$slots.default() // 获取默认插槽（其他名字这里.name） 这里可以获得this，应为使用的是2.0的写法
    const dymanicItem = []
    items.forEach((item, index) => {
      dymanicItem.push(item)
      if (index !== items.length - 1) {
        dymanicItem.push(h('i', { class: 'iconfont icon-angle-right' })) // 添加i元素
      }
    })
    return h('div', {
      class: 'xtx-bread'
    }, dymanicItem)
  }
}
</script>

<style lang='less'>
// 去掉scoped，让样式作用与item，该组件与item是插槽关系，不是父子组件
.xtx-bread {
  display: flex;
  padding: 25px 10px;
// ul li:last-child {作用：先找到父元素，找到所有子元素，找到最后一个，判断是不是li，是就选中，不是就是无效选择 }
// ul li:last-of-type {} 先找到父元素，找到所有类型为li的子元素，选中最后一个li
  &-item {
    a {
      color: #666;
      transition: all .4s;

      &:hover {
        color: @xtxColor;
      }
    }
  }

  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
    // &:last-child{ 不灵活
    //   display: none;
    // }
  }
}
</style>
